<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Wireframe</title>
		<link rel="stylesheet" href="./jqueryui/css/ui-lightness/jquery-ui-1.8.18.custom.css" type="text/css">
		<link rel="stylesheet" href="./bootstrap/css/bootstrap.css" type="text/css">
		<script type="text/javascript" language="javascript" src="./jquery/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" language="javascript" src="./jquery/jquery.validate.min.js"></script>
		<script type="text/javascript" language="javascript" src="./bootstrap/js/bootstrap.js"></script>
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function()
			{
				$("[rel='popover']").popover( { animation: true, placement: 'bottom', trigger: 'manual' } );
				$("#login").click(function() {
					$('#login').popover('toggle');
				});
				
				$(".recover-password-btn").live("click", function(){ window.location.href = "./recoverpassword.html" });
				$("#userProfileForm").validate();
			});
		</script>
	</head>
	<body>
		<div class="navbar">
			<div class="navbar-inner">
				<div class="container" style="width: auto;">
					<div class="container">
						<ul class="nav pull-left">
							<li>
								<a href="./index.html">Home</a>
							</li>
							<li>
								<a href="./bills.html">Bills</a>
							</li>
							<li>
								<a href="./vendors.html">Vendors</a>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									Account
									<b class="caret"></b>
								</a>
								<ul class="dropdown-menu">
									<li><a href="./billhistory.html">Bill History</a></li>
									<li><a href="./userprofile.html">Edit Profile</a></li>
									<li><a href="./editvendors.html">Edit Vendors</a></li>
									<li><a href="./paymentaccounts.html">Edit Payment Accounts</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="span12 ui-corner-all">
					<div class="well">
						<h1>User Profile</h1>
						<br/><br/>
						<form name="input" id="userProfileForm" action="./bills.html" method="post">
						<label for="fname">First Name:</label>
						<em>*</em*><input type="text" name="fname" id="fname" class="required" minlength="2" />
						<label for="lname">Last Name:</label>
						<em>*</em*><input type="text" name="lname" id="lname" class="required" minlength="2" />
						<label for="address1">Address 1:</label>
						<em>*</em*><input type="text" name="address1" id="address1" class="required" minlength="2" />
						<label for="address2">Address 2:</label>
						<input type="text" name="address2" id="address2" />
						<label for="city">City:</label>
						<em>*</em*><input type="text" name="city" id="city" />
						<label for="state">State:</label>
						<select size="1" name="state" id="state" class="required" >
							<option selected="selected">Select a State</option>
							<option value="ak">Alaska</option>
							<option value="ca">California</option>
							<option value="ny">New York</option>
							<option value="il">Illinois</option>
							<option value="tx">Texas</option>
						</select>
						<label for="zipcode">ZIP Code:</label>
						<em>*</em*><input type="text" name="zipcode" id="zipcode" class="required"/>
						<label for="homephone">Home Phone:</label>
						<em>*</em*><input type="text" name="homephone" id="homephone" class="required" minlength="2" />
						<br/><br/>
						<input type="submit" value="Save Changes" />
						<a href="bills.html"><input type='submit' value='Cancel' /></a>
						</form>
						<br/>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>